<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性必须当作属性来使用，不能用作方法来调用，不能加小括号 -->
    <input type="text" v-model.lazy="xing">
    <span>+</span>
    <input type="text" v-model.lazy="ming">
    <span>=</span>
    <input type="text" v-model.lazy="fullName">
  </div>
</template>

<script>
import { set } from 'vue'
export default {
  data () {
    return {
      xing:'张',
      ming:'三'
    }
  },
  //计算属性要写到 和data 平级的computed 中
  computed: {
    //所有计算属性，都放到这  
    // [计算属性，必须返回计算的结果]
    // fullName () {
    //   return this.xing + this.ming
    // }

    //如果需要修改属性的值，需要写成对象格式（对象中要写get 和 set 方法
  fullName : {
    //  当使用计算属性的时候，get就执行了
    get () {
      return this.xing + '' + this.ming
    },
    // 当修改计算属性的时候，set就执行了。形参就是修改后的结果
    set (val) {
      let arr = val.split(' ')
      this.xing = arr[0]
      this.ming = arr[1]
    }
  }
  }
}
</script>

<style>

</style>